<template>
  <div class="app-container">
    <div class="app-container-page kz-el-tabs">
      <el-tabs type="border-card" @tab-click="handleTabClick" v-model="activeName">
        <el-tab-pane :label="`全部客资(${nowdatalist.length})`">
        </el-tab-pane>
        <el-tab-pane :name="`${item[0].status_name}`" :label="`${item[0].status_name}(${nowdatalist.filter(idata => idata.kz_status_id == item[0].kz_status_id).length})`"  v-for="item in kzList" :key="item.kz_status_id">
          <!-- <kzTable :listLoading="loading" :datalist="nowdatalist" @queryDatalist="queryData" @queryALlKzindex="getAllKzMeth"></kzTable> -->
        </el-tab-pane>
      </el-tabs>
      <kzTable :sta_id="sta_id" :listLoading="loading" :total="total" :datalist="datalist" @queryDatalist="queryData" @queryALlKzindex="queryData"></kzTable>
    </div>
  </div>
</template>

<script>
import kzTable from '../components/kz-table.vue'
import { getAllKzStatus, getAllKz, getKz } from "@/api/kz/index";
import { groupBy } from '@/utils/index.js'
export default {
  name: 'keziIndex',
  components: {
    kzTable
  },
  data() {
    return {
      loading: false,
      driver: null,
      kzList: [],
      datalist: [],
      nowdatalist: [],
      activeName: '新客资',
      sta_id: '',
      total: 0,
      query:{
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  mounted() {
    this.getAllStatus()
  },
  methods: {
    // 获取全部客资
    getAllKzMeth() {
      this.loading = true;
      getAllKz().then(res => {
        console.log('获取全部客资', res);
        this.loading = false;
        if (res.rstpCode === '0000') {
          this.total = res.data.length
          this.nowdatalist = res.data;
          // this.queryData(this.query)
          this.handleTabClick({
            index: this.sta_id ? this.sta_id : '2',
          })
        } else {
          this.$Message.error(res.rstpMsg);
        }
      })
    },
    // 根据条件查询客资
    queryData(param) {
      console.log('submit!', param);
      this.query = {
        ...param,
      }
      this.getAllKzMeth()
    },
    // 获取所有状态
    getAllStatus() {
      getAllKzStatus()
        .then((res) => {
          console.log('获取所有客资状态', res);
          if (res.rstpCode === '0000') {
            // this.kzList = res.data;
            this.kzList = groupBy(res.data, (item) => {
              return item.status_name
            })
            console.log('kzList', this.kzList);
            this.getAllKzMeth()
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
    },
    handleTabClick(tab) {
      console.log(tab);
      this.sta_id = tab.index
      if (tab.index == '0') {
        // this.queryData(this.query)
        getKz(this.query).then(res => {
          console.log('根据条件查询客资', res);
          this.loading = false;
          if (res.rstpCode === '0000') {
            this.datalist = res.data;
            this.total = res.total_rows;
            // this.getAllKzMeth()
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      } else {
        this.loading = true;
        getKz({
          kz_status_id: parseInt(this.sta_id),
          ...this.query
        }).then(res => {
          console.log('根据条件查询客资', res);
          this.loading = false;
          if (res.rstpCode === '0000') {
            this.datalist = res.data;
            this.total = res.total_rows;
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      }
    }
  }
}
</script>
<style scoped lang="less">
  .app-container-page {
    padding-top: 20px;
    .el-tabs__item {
      padding: 0 8px;
      height: 35px;
      line-height: 35px;
      font-size: 12px;
    }
  }
</style>
